<template>
    <div class="reset-password">
      <h2>重置密码</h2>
      <form @>
        <label for="newPassword">新密码：</label>
        <input type="password" id="newPassword" v-model="newPassword" required>
        <label for="confirmPassword">确认新密码：</label>
        <input type="password" id="confirmPassword" v-model="confirmPassword" required>
        <button type="button" @click="resetPassword">重置密码</button>
        <p v-if="isPasswordMismatch" class="error-message">两次输入的密码不一致，请重新输入！</p>
        <p v-if="isPasswordReset" class="success-message">重置密码成功！</p>
      </form>
    </div>
  </template>
  
  <script>
  import axios from 'axios';

  export default {
    data() {
      return {
        newPassword: '',
        confirmPassword: '',
        isPasswordMismatch: false,
        isPasswordReset: false
      };
    },mounted() {
      // 检查 localStorage 是否存在 email 参数
      if (!localStorage.getItem('email')) {
        // 重定向至 /login
        this.$router.push('/login');
      }
        
    },
    methods: {
      resetPassword() {
        this.newPassword = document.getElementById('newPassword').value;
        this.confirmPassword = document.getElementById('confirmPassword').value;
        if (this.newPassword === this.confirmPassword) {
          // 执行重置密码的逻辑
          // 可以在此处发送 API 请求或执行其他操作
          // 构建请求 URL
          //本地测试
          const url = 'http://localhost:28080/api/user/passwd';
          //远程测试
          //axios.defaults.baseURL = 'http://43.143.82.72:28080'
          //const url = 'http://43.143.82.72:28080/api/user/passwd';

          // 发送 GET 请求
          axios.get(url, {
            params: {
              email: localStorage.getItem('email'),
              oldPassword : '', //忘记密码时的重置如何获取旧密码
              password: this.newPassword
            }
          })
            .then(response => {
              if (response.code == 200) {
                // 重置密码成功
                this.isPasswordMismatch = false;
                this.isPasswordReset = true;
                //重定向至登录页面
                this.$router.push('/login')
              } else {
                this.$message.error('重置密码失败')
              }
            })
            .catch(error => {
              // 处理错误
              console.error(error);
            });
  
        } else {
          // 两次输入的密码不一致
          this.isPasswordReset = false;
          this.isPasswordMismatch = true;
        }
      }
    }
  }
  </script>
  
  <style scoped>
  .reset-password {
    max-width: 400px;
    margin: 0 auto;
  }
  
  h2 {
    text-align: center;
    margin-top: 200px;
  }
  
  form {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
  }
  
  label {
    margin-bottom: 10px;
  }
  
  input {
    padding: 8px;
    margin-bottom: 15px;
  }
  
  button {
    padding: 10px;
    background-color: #FF9000;
    color: white;
    border: none;
    cursor: pointer;
    margin-left: 10px;
  }
  
  .error-message,
  .success-message {
    margin-top: 10px;
    color: #FF9000;
    text-align: center;
  }
  </style>  